<template>
<div class="pie-box" :style="{width:width,height:height}" @mouseenter="stopData()" @mouseleave="startData()">
<!--    <div class="row-data">-->
<!--        <span>{{rollDataValue}}</span>-->
<!--       <div>{{rollDataText}}</div>-->
<!--    </div>-->
    <div v-show="flag"  @mouseenter="stop()" @mouseleave="start()"  class="echarts" ref="echarts" :style="{height:height}"></div>
    <div v-show="!flag"  class="no-data-echarts">
        {{message}}
    </div>
</div>
</template>
<script>
import mixincomon from '../../../mixins/mixincomon';

export default {
    name:"chart",
    mixins: [mixincomon],
    data(){
        return {
            timeDataFlag:null,//数据轮训定时
            lightIndex:0,//默认第一个模块高亮
            flag:true,
          rollDataValue:0,
            options: {
                color:['#ff3d3d','#ff8c53',"#ffc945"],
                legend: {
                    show:true,
                    data: [],
                    textStyle:{
                        color:'#fff'
                    },
                    bottom:10,
                    type:"scroll",
                    icon:"rect",
                    pageIconInactiveColor:'#aaa',
                    pageIconColor:"#008aff",
                    pageTextStyle:{
                        color:"#fff",
                    }
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor:'rgba(54, 165, 254, 0.6)',
                    formatter: '{b} : {c} ({d}%)'
                },
                series: [
                    {
                      type: 'pie',
                      radius: '75%',
                      minAngle:5,
                      center: ['50%', '50%'],
                      data:[],
                      label: {
                          position: 'outer',
                          alignTo: 'none',
                          bleedMargin: 5,
                          formatter:'{a}{b} {c}个'
                      },
                      left: 0,
                      top: 0,
                      bottom: 0
                  },
                  {
                    label: {
                      formatter: "{b|{b}} \n {c|{c}}",
                      rich:{
                        b:{
                          fontSize:16,
                          color:'#fff',
                          height: 30,
                        },
                        c:{
                          color:"#fff"
                        }
                      },
                      show: true,
                      position: 'center'
                    },
                  }


              ]
            },

        }
    },
    props:{
        option:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        rollData:{
          type:Boolean,
          default:false,
        },
        rollDataText:{
           type:String,
           default:'隐患设备'
        },
        height:{
          type:String,
           default:'300px'
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.init();
        })
    },
    watch: {

    },
    methods:{

        init(){
            if(this.data.length>0){
                let _option=_.merge(this.options,this.option);
                console.log(_option,'_option',this.options)

                this.flag=true;
                this.$nextTick(()=>{
                    let legend=[],series=[];
                    this.data[0].data.map((item)=>{
                        legend.push(item.name?item.name:'');
                    })
                    this.data.map((item,index)=>{
                        series.push(_.merge(Object.assign({type:'pie'},_option.series[index]),item));
                    })
                    _option.series=series;
                    _option.legend.data=legend;
                  this.optionsEnd=_.cloneDeep(_option);
                  // console.log(this.roll&&this.rollshow<(_.get(_option.series,'0.data')||[]).length,'ddd')
                  if(this.roll&&this.rollshow<(_.get(_option.series,'0.data')||[]).length){//只有设置了滚动 且数据的大小大于最小滚动值
                    this.dataEnd=_.cloneDeep(_option.series);
                    _option.series.map((item)=>{
                      item.data=item.data.slice(0,this.rollshow);
                    })
                    this.index=this.rollshow;
                  }
                  this.optionCureen=_.cloneDeep(_option);
                  this.initChart('echarts',this.optionCureen);
                  // console.log(this.optionCureen,'ok===Data')
                  this.start();
                  this.startData();
                 })

            }else{
                this.clearChart();
                this.flag=false;
            }
        },
      setTime(){//动态塞入数据
        this.stop();
        let _index;
        console.log(this.optionCureen,'eeee===')
        this.setTimeFlag=setInterval(()=>{
          _index=this.index%this.optionsEnd.series[0].data.length;
          this.optionCureen.series[0].data.shift();
          this.optionCureen.series[0].data.push(this.optionsEnd.series[0].data[_index]);
          // console.log(this.optionCureen.series[0].data,'====');
          this.index++;
          this.myChart.setOption(this.optionCureen);
        }, this.rollTime);
      },
      stopData(){
        this.timeDataFlag&&clearTimeout(this.timeDataFlag);
      },
      startData(){
        if(this.rollData&&(_.get(this.optionsEnd.series,'0.data')||[]).length){
          this.lightIndex=0;
          this.setTimeData();
        }
      },
      setTimeData(){//动态选中模块
          this.stopData();
          this.timeDataFlag=setInterval(()=>{
            this.myChart.dispatchAction({
              type: 'showTip',         //提示框
              seriesIndex: 0,
              dataIndex: this.lightIndex%this.optionCureen.series[0].data.length
            });
            this.lightIndex++;
          },1000)
      }
    }
}
</script>
<style lang="less" scoped>
.pie-box{
  position: relative;
  .row-data{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,50%);
  }
}
.no-data-echarts{
    height: 100%;
    position: relative;
    span{
        left: 0;
        text-align: center;
        position: absolute;
        top: 45%;
    }
}
</style>
